import {getArea} from "../api/sys";

export default {
    data() {
        return {
            multAreaIndex: [0, 0, 0],
            //获取数据的列表
            newCategotyAreaList: [[], [], []],
        }
    },
    methods: {
        queryArea() {
            // 获取第一层数据
            getArea({pid: 0}).then(res => {
                this.newCategotyAreaList = [[], [], []];
                res.data.forEach(item => {
                    this.newCategotyAreaList[0].push({id: item.id, name: item.name, pid: item.pid});
                });

                // 获取第二层数据
                return this.fetchAreaData(this.newCategotyAreaList[0][0].id, 1);
            })
                .then(() => {
                    // 获取第三层数据
                    return this.fetchAreaData(this.newCategotyAreaList[1][0].id, 2);
                })

        },
        fetchAreaData(pid, index) {
            return getArea({pid})
                .then(res => {
                    // 清空该层的数据，并用新的数据填充
                    let areaList = [];
                    res.data.forEach(item => {
                        areaList.push({id: item.id, name: item.name, pid: item.pid});
                    });

                    // 更新 newCategotyAreaList 的指定索引
                    this.newCategotyAreaList[index] = areaList;

                    // 如果需要强制更新视图，可以使用 $forceUpdate，但一般情况下 Vue 会自动更新
                    this.$forceUpdate();
                })
                .catch(error => {
                    // 捕获请求错误并输出
                    console.error('Error fetching area data:', error);
                });
        },
        pickerColumnDept(e) {
            if (e.detail.column === 0) {
                // 更新第一列的选择值
                this.multAreaIndex[0] = e.detail.value;
                const selectedDeptId = this.newCategotyAreaList[0][e.detail.value].id;

                // 获取第二列数据，先加载第一列
                this.fetchAreaData(selectedDeptId, 1).then(() => {
                    // 第二列数据加载完成后，再加载第三列数据
                    this.fetchAreaData(this.newCategotyAreaList[1][0].id, 2);
                });
            }

            if (e.detail.column === 1) {
                // 更新第二列的选择值
                this.multAreaIndex[1] = e.detail.value;
                const selectedDeptId = this.newCategotyAreaList[1][e.detail.value].id;

                // 获取第三列数据
                this.fetchAreaData(selectedDeptId, 2);
            }
        },
    },
}